<template>
	<view class="cardbody">
		<u-navbar back-text="全部图片" :border-bottom="false" :back-text-style="textStyle" back-icon-color="#000000" style="font-weight: bold;font-family: PingFang SC;"></u-navbar>
		<mescroll-body top="0" :down="downOption" :up="upOption" :height="comHeight" ref="mescrollRef" @init="mescrollInit" @down="downCallback">
			<view style="width: 100%;margin: auto;padding-top: 20rpx;">
				<view v-if="shoopimgs.albumImageCount>0" style="width: 92%;color: #363636;font-size: 30rpx;padding-bottom:20rpx ; margin: auto;display: flex;justify-content: space-between;align-items: center;">
					<view style="">商家相册</view>
					<view @tap="jump(0)" style="display: flex;">
						<view>共{{shoopimgs.albumImageCount||'0'}}张</view>
						<u-icon name="arrow-right" color="#000000" size="28"></u-icon>
					</view>
				</view>
				<view style=" width:100% ;margin: auto;background-color:#F0F0F0;padding-top: 20rpx;">
					<view style="width: 92%;margin: auto;display: flex;flex-wrap: wrap; justify-content: space-between;align-items: center;">
						<view style="height: 248rpx;width: 49%;margin-bottom: 25rpx;" v-for="(item, index) in shoopimgs.albums" :key="index">
							<image :src="item" style="width: 100%;height: 100%;" mode="aspectFill"></image>
						
						</view>
					</view>
					
				</view>
				<view v-if="shoopimgs.appraiseImageCount>0" style="width: 92%;color: #363636;font-size: 30rpx;padding:20rpx 0; margin: auto;display: flex;justify-content: space-between;align-items: center;">
					<view style="">用户评价</view>
					<view @tap="jump(1)" style="display: flex;">
						<view>共{{shoopimgs.appraiseImageCount||'0'}}张</view>
						<u-icon name="arrow-right" color="#000000" size="28"></u-icon>
					</view>
				</view>
				<view style="width: 100%;height: 2rpx ;background-color: #F5F5F5;"></view>
				<view style=" width:100% ;margin: auto;padding-top: 20rpx;">
					<view style="width: 92%;margin: auto;display: flex;flex-wrap: wrap; justify-content: space-between;align-items: center;">
						<view style="height: 248rpx;width: 49%;background-color: #F0F0F0;margin-bottom: 25rpx;" v-for="(item, index) in shoopimgs.appraises" :key="index">
							
						<image :src="item" style="width: 100%;height: 100%;" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				
				<view style="margin: 40rpx 0;">
					<u-divider color="#DEDEDE" half-width="120" border-color="#DEDEDE">{{prompt}}</u-divider>
				</view>
			</view>
		</mescroll-body>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				textStyle: {
					color: '#272755'
				},
				downOption: {
					use: true,
					auto: false,
					offset: 40
				},
				upOption: {
					use: false
				},
				mescroll: null,
				prompt: '没有更多了',
				page: 1,
				shoopimgs:[],
				cards: [
					{},
					{},
					{}
				],
				comHeight:0,
				id:''
			};
		},
		onLoad(option) {
			that = this;
			var menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			const {
				top,
				width,
				height,
				right
			} = menuButtonInfo;
			uni.getSystemInfo({
				success: res => {
					const {
						statusBarHeight
					} = res;
					const margin = top - statusBarHeight;
					var navHeight = height + statusBarHeight + margin * 4;
					that.comHeight = (res.windowHeight  - navHeight) + 'px';
					console.log(that.comHeight);
				}
			});
			this.id=option.enterpriseId;
			this.getShopdetails(option.enterpriseId)
			
		},
		onShow() {},

		onReachBottom() {
			
		},
		methods: {
			jump(num){
				uni.navigateTo({
					url:'shoop_all?enterpriseId='+this.id+'&num='+num
				})
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			getShopdetails(enterpriseId) {
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'image/album',
				};
				let data = {
					id: enterpriseId
				};
				this.http.httpTokenRequest(opts, data).then(res => {
					if (res.code = 200) {
						this.shoopimgs=res.data
					} else {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error'
						})
					}
				})
			},

			
		}

	};
</script>

<style>
	.cardbody {
		width: 100%;
		margin: auto;
	}

		
	
	
</style>
